<template>
  <div>
    <tabbar class="mytab">
      <tabbar-item v-for="i in tabList" :key="i.name" :selected="i.isSelected" @click.native="changeTab(i)" :link="i.link">
        <img slot="icon" src="">
        <span slot="label">{{i.name}}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vux";

export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data() {
    return {
      tabList: [
        {
          name: "首页",
          icon: "",
          link: "home",
          isSelected: true
        },
        {
          name: "投资",
          icon: "",
          link: "invest",
          isSelected: false
        },
        {
          name: "发现",
          icon: "",
          link: "find",
          isSelected: false
        },
        {
          name: "我的",
          icon: "",
          link: "mine",
          isSelected: false
        }
      ]
    };
  },
  methods: {
    changeTab(val) {
      val.isSelected = true;
      this.tabList.forEach((i, index) => {
        i.isSelected = false;
      });
    }
  },
  mounted() {
    let curUrl = this.$router.currentRoute.path;

    for (let i = 0; i < this.tabList.length; i++) {
      this.tabList[i].isSelected = false;
      if (curUrl.indexOf(this.tabList[i].link) != -1) {
        this.tabList[i].isSelected = true;
      }
    }
  }
};
</script>

<style scoped lang = "less">
.mytab {
  position: fixed;
}
</style>
